<template>
  <div class="Usergrowthtrend_main_box_css">
    <div class="Usergrowthtrend_content_box_css" id="Usergrowthtrend_content">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
    export default {
        name:'Usergrowthtrend',
        data(){
            return{
                option:{
                    title:{
                        text:'用户增长率'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [],
                            type: 'line'
                        }
                    ]
                  }
            }
        },
        mounted(){
            var that=this
            axios
            .get('http://127.0.0.1/Usergrowthtrend')
            .then(function(res){
                for(var i=0;i<7;i++){
                    that.option.series[0].data.push(res.data[i])
                }
                that.UserGrowthtrend()
            })
            .catch(function(error){
                console.log(error)
            })
        },
        methods:{
            UserGrowthtrend(){
                var that=this
                var chart = echarts.init(document.getElementById("Usergrowthtrend_content"));
                chart.setOption(this.option)
            }
        }
    }
</script>

<style>
    .Usergrowthtrend_main_box_css{
        width: 60vw;
        height: 43vh;
    }
    .Usergrowthtrend_content_box_css{
        width: 100%;
        height: 100%;
    }
</style>